<template>
  <Dialoger v-model="isShow" :onConfirm="handleSubmit" :dialogCls="'d-paner-sm'" title="编辑">
    <template v-slot:body>
      <div class="d-row">
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">页面</label>
          </div>
          <div class="d-form-el">
            <!-- <FormSelecter v-model="state.pageId" :data="pages" value-key="id" :text-key="'name'" slide-max-height="200px" /> -->
            <el-select v-model="state.pageId" filterable placeholder="请选择">
              <el-option
                v-for="item in pages"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">名称</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.name" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">路径</label>
          </div>
          <div class="d-form-el">
            <input v-model="state.path" class="d-form-input" type="text" />
          </div>
        </div>
        <div class="d-form-group d-form-group-flex d-col-xs-12">
          <div class="d-form-label d-text-right">
            <label class="label-text">默认显示</label>
          </div>
          <div class="d-form-el">
            <select v-model="state.isDefault" class="d-form-select">
              <option v-for="item in statusList" :key="item.id" :value="item.id">{{ item.text }}</option>
            </select>
          </div>
        </div>
      </div>
    </template>
  </Dialoger>
</template>

<script>
import { PanerForm } from '@daelui/vdog/dist/pages.js'
import { Dialoger, FormCalendar, FormSelecter, Switcher } from '@daelui/vdog/dist/components.js'
import { zh as locale } from '@daelui/dogjs/dist/locale.js'
import { parser, objecter, strer } from '@daelui/dogjs/dist/components.js'
import vpageSer from '@/service/action/viewpage.action'
import { state } from '@/service/stock/index.js'

export default {
  components: {
    PanerForm,
    FormCalendar,
    Dialoger,
    FormSelecter,
    Switcher
  },

  data () {
    return {
      isShow: false, // 窗口是否显示
      isEdit: false, // 是否是编辑模式,
      // 编辑信息
      editInfo: {},
      // 表单数据
      state: {
        id: strer.utid(),
        name: '',
        pageId: '',
        path: '',
        isDefault: false
      },
      pages: [],
      // 状态列表
      statusList: state.judgeOptions,
    }
  },

  watch: {
    'state.pageId': function () {
      let page = this.pages.find(item => item.id === this.state.pageId)
      if (page && (!this.state.name || this.pages.find(item => item.name === this.state.name))) {
        this.state.name = page.name
      }
      if (page && (!this.state.path || this.pages.find(item => item.path === this.state.path))) {
        this.state.path = page.path
      }
    }
  },

  methods: {
    /**
     * @function 显示与隐藏
    */
    show (data) {
      this.isShow = !!data
      data = data || {}
      this.editInfo = data
      if (data.edit) {
        this.isEdit = true
        this.state = objecter.clone(data.item)
      } else {
        this.isEdit = false
        let newItem = {
          id: strer.utid(),
          name: '',
          pageId: '',
          path: '',
          isDefault: false
        }
        this.state = newItem
      }
      // 查询页面数据
      vpageSer.queryListAll({mid: this.editInfo.mid}).then((res) => {
        let list = res.data
        list = Array.isArray(list) ? list : []
        this.pages = list
      })
    },

    /**
     * @function 提交
    */
    handleSubmit () {
      if (!this.state.pageId) {
        this.$message({
          type: 'warning',
          message: '请选择页面',
          showClose: true
        })
        return true
      }
      this.$emit('onSubmitSuccess', this.state)
    }
  }
}
</script>

<style lang="less" scoped>
.d-row {
  .d-form-group:last-child {
    margin-bottom: 0;
  }
}
.d-form-label {
  width: 90px;
}
</style>
<style lang="less">
.d-form-el .el-select {
  display: block;
  .el-input__inner {
    padding: 0 8px;
  }
}
</style>
